{include file='public/header'/}
<div style="padding: 15px;margin: 15px;background-color: #fff;">
    <!-- 头工具栏 -->
    <button class="layui-btn layui-btn-sm" lay-event="delAll">批量删除</button>
    <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
    <button class="layui-btn layui-btn-sm" lay-event="refresh"><i class="layui-icon layui-icon-refresh"></i></button>
    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" lay-event="openAll">全部展开</button>
    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" lay-event="closeAll">全部关闭</button>

    <!-- 折叠数据表格 -->
    <table class="layui-table layui-form" id="treeTable" lay-size="md"></table>
</div>

<!-- js -->
<script>
    // tableTree组件
    layui.config({
        base: '/static/third/js/'
    });
    layui.use(['treeTable', 'form', 'util'], function () {
        var treeTable = layui.treeTable
            , form = layui.form
            , util = layui.util
            , $ = layui.jquery;

        // 渲染表格
        var treeTb = treeTable.render({
            elem: '#treeTable',
            url: '/admins/menus/index',
            toolbar: '#toolbar',
            height: 'full',
            defaultToolbar: ['filter', 'exports', 'print'],
            icon_key: 'title',
            top_value: 0,
            primary_key: 'id',
            parent_key: 'pid',
            hide_class: 'layui-hide',
            icon: {
                open: 'layui-icon layui-icon-triangle-d',
                close: 'layui-icon layui-icon-triangle-r',
                left: 16,
            },
            cols: [{
                key: 'id',
                title: 'ID',
            }, {
                key: 'title',
                title: '菜单树',
                width: '200px',
            }, {
                key: 'controller',
                title: '控制器',
            }, {
                key: 'action',
                title: '方法',
            }, {
                key: 'ord',
                title: '排序',
            }, {
                key: 'icon',
                title: '图标',
                template: function (item) {
                    return item.icon ? '<i class="layui-icon ' + item.icon + '"></i>' : '';
                }
            }, {
                key: 'ishidden',
                title: '是否隐藏',
                width: '95px',
                template: function (item) {
                    return '<input type="checkbox" name="ishidden" lay-filter="ishidden" value="0" data-id="' + item.id + '" lay-skin="switch" lay-text="显示|隐藏"' + (item.ishidden == 0 ? ' checked' : '') + '>';
                }
                // templet: function (item) {
                //     return item.ishidden ? '<span style="color:#c2c2c2">隐藏</span>' : '<span style="color:#5FB878">正常</span>';
                // }
            }, {
                key: 'status',
                title: '是否禁用',
                width: '95px',
                template: function (item) {
                    return '<input type="checkbox" name="status" lay-filter="status" value="0" data-id="' + item.id + '" lay-skin="switch" lay-text="启用|禁用"' + (item.status == 0 ? ' checked' : '') + '>';
                }
                // templet: function (item) {
                //     return item.status ? '<span style="color:#c2c2c2">禁用</span>' : '<span style="color:#5FB878">启用</span>';
                // }
            }, {
                title: '操作',
                align: 'center',
                width: '200px',
                template: function (item) {
                    return '<a class="layui-btn layui-btn layui-btn-normal layui-btn-xs" lay-filter="add">添加下级</a><a class="layui-btn layui-btn layui-btn-xs" lay-filter="edit">编辑</a><a class="layui-btn layui-btn-danger layui-btn-xs" lay-filter="del">删除</a>';
                }
            }],
            checked: {},
			is_click_icon: false,
			is_checkbox: true,
            end: function (e) {
                form.render();
            },
        });

        // 监听头工具事件
        util.event('lay-event', {
            // 批量删除菜单
            delAll: function(othis) {
                var ids = treeTable.checked(treeTb);
                if (ids.length == 0) layer.msg('请选择数据');
                $.post('/admins/menus/del', { id: ids }, function (res) {
                    if (res.code) return layer.alert(res.msg, { icon: 2 });
                    layer.msg(res.msg);
                    ids.forEach(id => $('#treeTable tr[data-id="'+ id +'"]').remove());
                }, 'json');
            },

            // 添加菜单
            add: function (othis) {
                layer.open({
                    type: 2,
                    maxmin: true,
                    title: '添加',
                    shadeClose: true,
                    shade: 0.3,
                    area: ['480px', '450px'],
                    content: '/admins/menus/add',
                });
            },

            // 刷新
            refresh: function (othis) {
                window.location.reload();
            },

            // 全部展开
            openAll: function (othis) {
                treeTable.openAll(treeTb);
            },

            // 全部关闭
            closeAll: function (othis) {
                treeTable.closeAll(treeTb);
            }
        });

        // 监听行工具事件
        // 添加下级
        treeTable.on('tree(add)', function (obj) {
            var data = obj.item;
            layer.open({
                type: 2,
                title: '添加下级',
                shadeClose: true,
                shade: 0.3,
                area: ['480px', '450px'],
                content: '/admins/menus/add?id=' + data.id,
            });
        })

        // 编辑
        treeTable.on('tree(edit)', function (obj) {
            var data = obj.item;
            layer.open({
                type: 2,
                maxmin: true,
                title: '编辑菜单',
                shadeClose: true,
                shade: 0.3,
                area: ['480px', '450px'],
                content: '/admins/menus/edit?id=' + data.id,
            });
        })

        // 删除
        treeTable.on('tree(del)', function (obj) {
            console.log(obj);
            var data = obj.item;
            layer.confirm('真的删除行么？', { icon: 3 }, function (index) {
                layer.close(index);
                $.post('/admins/menus/del', { id: data.id }, function (res) {
                    if (res.code) return layer.alert(res.msg, { icon: 2 });
                    layer.msg(res.msg);
                    $('#treeTable tr[data-id="'+ data.id +'"]').remove();
                }, 'json');
            });
        })

        //列表开关事件
        form.on('switch(ishidden)', function (obj) {
            $.post('/admins/menus/save_edit', { id: this.dataset.id, ishidden: obj.elem.checked ? 0 : 1 }, function (res) {
                if (res.code) return layer.alert(res.msg, { icon: 2 });
                layer.msg(res.msg);
            }, 'json');
        });
        form.on('switch(status)', function (obj) {
            $.post('/admins/menus/save_edit', { id: this.dataset.id, status: obj.elem.checked ? 0 : 1 }, function (res) {
                if (res.code) return layer.alert(res.msg, { icon: 2 });
                layer.msg(res.msg);
            }, 'json');
        });
    });

</script>
{include file='public/footer'/}